<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_绘制点</title>
    <script src="./glMatrix-0.9.6.min.js"></script>
</head>
<body>
    <canvas id="webgl-canvas" width="300" height="200"></canvas>
</body>
</html>
<script>
    // 顶点 shader
    const vertexstring = `
        attribute vec4 a_position;
        uniform mat4 proj;
        void main() {
            gl_Position = proj * a_position;
            gl_PointSize = 60.0;
        }
    `
    // 片元 shader
    const fragmentstring = `
        void main() {
            gl_FragColor = vec4(0, 0, 1.0, 1.0);
        }
    `
    var projMat4 = mat4.create()
    var webgl = null
    // 初始化函数
    function init() {
        initWebgl()
        initShader()
        initBuffer()
        draw()
    }
    // 初始化 Webgl
    function initWebgl() {
        const webglDiv = document.getElementById('webgl-canvas')
        webgl = webglDiv.getContext('webgl')
        // todo viewport ?
        webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight)
        // todo ortho?
        mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)
    }
    // 初始化 shader
    function initShader() {
        const vsshader = webgl.createShader(webgl.VERTEX_SHADER) // 顶点 shader
        const fsshader = webgl.createShader(webgl.FRAGMENT_SHADER) // 片元 shader

        webgl.shaderSource(vsshader, vertexstring) // 将 顶点 shader 与顶点程序进行数据绑定
        webgl.shaderSource(fsshader, fragmentstring) // 将 片元 shader 与顶片元程序进行数据绑定

        webgl.compileShader(vsshader) //编译 顶点 shader
        webgl.compileShader(fsshader) //编译 片元 shader

        if(!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {
            const err = webgl.getShaderInfoLog(vsshader)
            alert(err)
            return
        }
        if(!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {
            const err = webgl.getShaderInfoLog(fsshader)
            alert(err)
            return
        }

        const program = webgl.createProgram() // 创建程序
        webgl.attachShader(program, vsshader) // 将 顶点 shader 与 程序 建立连接
        webgl.attachShader(program, fsshader) // 将 片元 shader 与 程序 建立连接

        webgl.linkProgram(program)  // 将 webgl 与 程序 建立连接
        webgl.useProgram(program) // webgl 使用程序

        webgl.program = program // 赋值
    }
    // 初始化 缓冲区 Buffer
    function initBuffer() {
        const pointPosition = new Float32Array([100.0, 100.0, 0.0, 1.0])
        const aPosition = webgl.getAttribLocation(webgl.program, 'a_position')
        webgl.vertexAttrib4fv(aPosition, pointPosition)
        const uniformProj = webgl.getUniformLocation(webgl.program, 'proj')
        webgl.uniformMatrix4fv(uniformProj, false, projMat4)
    }
    // 画图
    function draw() {
        webgl.clearColor(0.0, 0.0, 0.0, 1.0)
        webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT)
        webgl.drawArrays(webgl.POINTS, 0, 1)
    }
    init()
</script>
<style>
    canvas {
        background-color: aqua;
    }
</style>
